<template>
  <div class="traffic" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="交通出行" left-text="" left-arrow>
      </van-nav-bar>
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div id='container'></div>
    <div class="info" style="display: none;">
      <h4 id='status'></h4>
      <hr>
      <p id='result'></p>
      <hr>
      <p>由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
    </div>
    <div class="chain">
      <p class="chain_txt">交通工具</p>
      <div class="chain_img">
        <div class="img_bpx">
          <div class="img1" @click="tiaozhuan('https://m.8684.cn/bus_switch','公交车')"></div>
        </div>
        <div class="img_bpx">
          <div class="img2" @click="tiaozhuan('https://m.8684.cn/'+city+'_dt','地铁')"></div>
        </div>
        <div class="img_bpx">
          <div class="img3" @click="tiaozhuan('https://m.ctrip.com/html5/flight/swift/index?secondwakeup=true&dpclickjump=true&allianceid=4897&sid=798174&sourceid=3518&from=https%3A%2F%2Fm.ctrip.com%2Fhtml5%2F','飞机票')"></div>
        </div>
        <div class="img_bpx">
          <div class="img4" @click="tiaozhuan('https://common.diditaxi.com.cn/general/webEntry?wx=true&bizid=257&channel=70365#/','出租车')"></div>
        </div>
        <div class="img_bpx">
          <div class="img5" @click="tiaozhuan('https://m.zuche.com/?_is_redirect=1','神州租车')"></div>
        </div>
        <div class="img_bpx">
          <div class="img6" @click="tiaozhuan('https://m.changtu.com/wap/index','汽车票')"></div>
        </div>
      </div>
    </div>

    <van-popup style="width: 100%;height: 100%;" v-model="show">
      <iframe src="http://m.city8.com/ln/subway/" frameborder="0" width="100%" height="100%"></iframe>
    </van-popup>
  </div>
</template>

<script>
// import city from '@/assets/js/city.js'
// import AMap from "AMap"
import pinyin from 'js-pinyin'
export default {
  components: {
    // "v-search": search,
  },
  data () {
    return {
      show: false,
      city: ''
    }
  },

  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
    if (sessionStorage.getItem("city")) {
      this.current = sessionStorage.getItem("city")
    } else {
      this.mapinit()
    }
  },
  created () {
    // this.getLocation();
    // this.getLngLatLocation()
  },
  methods: {
    mapinit () { // 定位
      let that = this
      let map = new AMap.Map('container', {
        resizeEnable: true
      })
      AMap.plugin('AMap.Geolocation', function () {
        let geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：5s
          buttonPosition: 'RB', // 定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
        })
        map.addControl(geolocation)
        geolocation.getCurrentPosition(function (status, result) {
          if (status == 'complete') {
            that.city = pinyin.getFullChars(result.addressComponent.city.replace(/\u5e02/g, '')).toLowerCase().replace(/(chou)/g, 'zhen')
            onComplete(result)
          } else {
            onError(result)
          }
        })
      })
      // 解析定位结果
      function onComplete (data) {
        // document.getElementById('status').innerHTML = '定位成功'
        let str = []
        str.push('定位结果：' + data.position)
        str.push('定位类别：' + data.location_type)
        if (data.accuracy) {
          str.push('精度：' + data.accuracy + ' 米')
        } // 如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'))
        document.getElementById('result').innerHTML = str.join('<br>')
      }
      // 解析定位错误信息
      function onError (data) {
        document.getElementById('status').innerHTML = '定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message
      }
    },
    clickleft () {
      this.$router.back(-1)
    },
    tiaozhuan (url, size) {
      this.$router.push({
        path: '/Home/Externallink',
        query: {
          url: url,
          size: size
        }
      })
    }
  }

}
</script>

<style lang="scss">
.traffic {
  height: 100%;
  // background: red;
  width: 100%;
  position: relative;
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  #container {
    width: 100%;
    height: 200px;
  }

  .chain {
    width: 90%;
    margin: 20px auto;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0px 1px 1px 1px #eee;

    .chain_txt {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      font-weight: 400;
      font-size: 16px;
    }

    .chain_img {
      height: 200px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-items: center;

      .img_bpx {
        width: 33%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;

        .img1 {
          width: 45px;
          height: 70px;
          background: url(../../assets/jiaotong/1.png) no-repeat;
          background-size: 100%;
        }

        .img2 {
          width: 47px;
          height: 70px;
          background: url(../../assets/jiaotong/2.png) no-repeat;
          background-size: 100%;
        }

        .img3 {
          width: 45px;
          height: 70px;
          background: url(../../assets/jiaotong/3.png) no-repeat;
          background-size: 100%;
        }

        .img4 {
          width: 45px;
          height: 70px;
          background: url(../../assets/jiaotong/4.png) no-repeat;
          background-size: 100%;
        }

        .img5 {
          width: 58px;
          height: 70px;
          background: url(../../assets/jiaotong/5.png) no-repeat;
          background-size: 100%;
        }

        .img6 {
          width: 45px;
          height: 70px;
          background: url(../../assets/jiaotong/6.png) no-repeat;
          background-size: 100%;
        }
      }
    }
  }
}
</style>
